
<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js canvas - materials</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            font-family: Monospace;
            background-color: #202020;
            margin: 0px;
            overflow: hidden;
        }
    </style>
</head>
<body>

<script src="../build/three.r88.js"></script>

<script src="js/renderers/Projector.r88.js"></script>
<script src="js/renderers/CanvasRenderer.r88.js"></script>

<script src="js/libs/stats.min.js"></script>

<script>

    var container, stats;

    var camera, scene, renderer, objects;
    var pointLight;

    init();
    animate();

    function init() {

        container = document.createElement('div');
        document.body.appendChild(container);

        camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
        camera.position.set( 0, 200, 800 );

        scene = new THREE.Scene();

        // Grid

        var gridHelper = new THREE.GridHelper( 1000, 10 );
        gridHelper.position.y = - 120;
        scene.add( gridHelper );

        // Spheres

        var geometry = new THREE.SphereGeometry( 100, 14, 7 );

        var textureLoader = new THREE.TextureLoader();

        var earthTexture = textureLoader.load( 'textures/land_ocean_ice_cloud_2048.jpg' );

        var envMap = textureLoader.load( 'textures/envmap.png' );
        envMap.mapping = THREE.SphericalReflectionMapping;

        var materials = [

            new THREE.MeshNormalMaterial( { overdraw: 0.5 } ),
            new THREE.MeshBasicMaterial( { map: earthTexture } ),
            new THREE.MeshBasicMaterial({
                map:THREE.ImageUtils.loadTexture('textures/texture-atlas.jpg'),
            })

        ];

        for ( var i = 0, l = geometry.faces.length; i < l; i ++ ) {

            var face = geometry.faces[ i ];
            //if ( Math.random() > 0.5 ) face.materialIndex = Math.floor( Math.random() * materials.length );
            if ( Math.random() > 0.5 ) face.materialIndex = 2;
            else face.materialIndex = 1;

        }

        materials.push( materials );

        objects = [];

        for ( var i = 0, l = materials.length; i < l; i ++ ) {

            var sphere = new THREE.Mesh( geometry, materials[ i ] );

            sphere.position.x = ( i % 5 ) * 200 - 400;
            sphere.position.z = Math.floor( i / 5 ) * 200 - 200;

            sphere.rotation.x = Math.random() * 200 - 100;
            sphere.rotation.y = Math.random() * 200 - 100;
            sphere.rotation.z = Math.random() * 200 - 100;

            objects.push( sphere );

            scene.add( sphere );

        }

        var PI2 = Math.PI * 2;
        var program = function ( context ) {

            context.beginPath();
            //context.arc( 0, 0, 0.5, 0, PI2, true );
            context.fill();

        };

        // Lights

        scene.add( new THREE.AmbientLight( Math.random() * 0x202020 ) );

        var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );
        directionalLight.position.x = Math.random() - 0.5;
        directionalLight.position.y = Math.random() - 0.5;
        directionalLight.position.z = Math.random() - 0.5;
        directionalLight.position.normalize();
        scene.add( directionalLight );

        pointLight = new THREE.PointLight( 0xffffff, 1 );
        scene.add( pointLight );

        var sprite = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0xffffff, program: program } ) );
        sprite.scale.set( 8, 8, 8 );
        pointLight.add( sprite );

        renderer = new THREE.CanvasRenderer();
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        container.appendChild( renderer.domElement );

        stats = new Stats();
        container.appendChild(stats.dom);

        //

        window.addEventListener( 'resize', onWindowResize, false );

    }

    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

    }

    function loadImage( path ) {

        var image = document.createElement( 'img' );
        var texture = new THREE.Texture( image, THREE.UVMapping );

        image.onload = function () { texture.needsUpdate = true; };
        image.src = path;

        return texture;

    }

    //

    function animate() {

        requestAnimationFrame( animate );

        render();
        stats.update();

    }

    function render() {

        var timer = Date.now() * 0.0001;

        camera.position.x = Math.cos( timer ) * 1000;
        camera.position.z = Math.sin( timer ) * 1000;
        camera.lookAt( scene.position );

        for ( var i = 0, l = objects.length; i < l; i++ ) {

            var object = objects[ i ];

            object.rotation.x += 0.01;
            object.rotation.y += 0.005;

        }

        pointLight.position.x = Math.sin( timer * 7 ) * 300;
        pointLight.position.y = Math.cos( timer * 5 ) * 400;
        pointLight.position.z = Math.cos( timer * 3 ) * 300;

        renderer.render( scene, camera );

    }

</script>

</body>
</html>
